<script setup lang="ts">
import request from "@api";
import { useStore } from "@/store";
import defaultPic from "@imgs/user_default.webp";
import { reactive, ref } from "@vue/reactivity";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
const store = useStore();
const props = defineProps({
  id: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits({
  initData: null,
});

const $router = useRouter();

let condition = reactive({
  id: props.id,
  pageSize: 10,
  pageNum: 1,
});

let list = ref([]);
let total = ref(0);

function getBlogListByUserId() {
  request["check/getCommitListPerson"]({
    params: condition,
  }).then((res: any) => {
    if (res.code == 200) {
      list.value = res.data.list;
      total.value = res.data.total;
      condition.pageNum = res.data.pageNum;
      condition.pageSize = res.data.pageSize;
    }
  });
}
function sizeChange(val: number) {
  condition.pageSize = val;
  getBlogListByUserId();
}

function currentChange(val: number) {
  condition.pageNum = val;
  getBlogListByUserId();
}

function toDetail(row: any) {
  $router.push({
    name: "blogDetail",
    params: {
      id: row.id,
    },
  });
}

function handlerDelete(row: any) {
  ElMessageBox.confirm("确认要删除嘛？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request["check/deleteCommitById"]({
        data: { id: row.id },
      }).then((res: any) => {
        if (res.code == 200) {
          ElNotification({
            type: "success",
            message: res.msg,
            showClose: false,
          });
          emit("initData");
          getBlogListByUserId();
        } else {
          ElNotification({
            type: "error",
            message: res.msg,
            showClose: false,
          });
        }
      });
    })
    .catch(() => {});
}

getBlogListByUserId();
</script>

<template>
  <div class="blogs_box">
    <div class="content_box">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="top_info_box">
          <div class="top_info">
            <div class="create_time">
              时间：
              {{ item.createTime }}
            </div>
          </div>

          <div class="btn-box">
            <el-button
              size="small"
              type="primary"
              @click.stop="handlerDelete(item)"
              >删除</el-button
            >
          </div>
        </div>

        <div class="commit_context">{{ item.context }}</div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="prev, pager, next , sizes , total"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.blogs_box {
  height: 100%;
  .content_box {
    height: calc(100% - 80px);
    overflow-y: auto;
    .item {
      margin-bottom: 10px;
      padding: 10px;
      border-bottom: 1px solid #ededed;
      .top_info_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
      }
      .top_info {
        display: flex;
        .user {
          width: 150px;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
          }
          span {
            margin-top: 5px;
            display: inline-block;
            text-align: center;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .create_time {
          display: flex;
          color: #999;
        }
      }
      .commit_context {
        margin-top: 10px;
      }
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}
</style>